jQuery Mobileの最初の最初～jQuery Mobile ページ機構のその前に～

#jQuery Mobile

福田寅成

2011.12.20

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは。くろの（福田）です。

弊社野中さんのjQuery Mobile コンポーネントシリーズ #1 「ページ機構」という記事があるのですが、もう少しベーシックな部分をメモっておきたいと思います。「そっからかよ！」な感じの内容ですので、主に「オレ2004年ころからHTML書いてないわ。10年ぶりくらいにちょっくらHTML書こうかな」的な方向けです。

■HTMLのベース

まず、HTMLのベースですが、以下のようになります。

<!DOCTYPE html> 
<html> 
<head> 
	<title>jQuey Mobile dayo( *｀ω´)</title> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head> 
<body> 
</body>
</html>

■DOCTYPE

昔のDOCTYPE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML5のDOCTYPE

<!DOCTYPE html>

最初にDOCTYPE宣言をしています。どういう文書（DOC）であるかを宣言してあるわけですが、HTML5は非常にシンプルな記述になりました。以前は長い宣言を書いていましたが、シンプルになりました。

下記のOperaの技術者さんの動画では「顧客にHTML5を作って欲しいと言われたら、顧客のウェブページの1行目を削除して、<!DOCTYPE html>とタイプすればHTML5ウェブサイトの完成だ！」と述べられています。便利な世の中になりましたね。（ちなみにこの動画では、2004年に動画に映っているOperaのオフィスにOpera、Mozilla、Apple、Google、Microsoftが集まり、HTML5の仕様を一緒に作っていこうとHTML5が始まったことが述べられています）

Opera Tech Break:HTML5 - YouTube

[SWF]http://www.youtube.com/v/X52zJ3XehIM&rel=0, 560, 315[/SWF]

下記W3CのサイトでDOCTYPEの定義が行われています。DOCTYPEそのものも要らない感じですが、何も無くなるとブラウザが特殊なレンダリングを行ってしまうために、最低限の記述が必要であることも下記ページで述べられています。

8.1.1 The DOCTYPE

jQuery Mobile本体への参照の追加

jQuery Mobileは一つのCSSファイルと2つのJavaScriptファイルで構成されているので、そのファイルへのリンクを追加します。ファイル群はjquery.comのCDNかマイクロソフトのCDNから取得します。

	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

jquery.mobile-1.0.min.css：デフォルトテーマのCSSファイル
jquery-1.6.4.min.js：jQuery本体のJavaScriptファイル
jquery.mobile-1.0.min.js：jQuery Mobile本体のJavaScriptファイル

個別のファイルや、デバッグ用のJavaScriptファイルなどは下記ダウンロードページで入手する事が可能です。

Download | jQuery Mobile

■昔のHTMLのページ構成

jQuery Mobile コンポーネントシリーズ #1 「ページ機構」で取り上げられているように、ヘッダー、本体、フッター構成のページを作る場合、昔は以下のようにHTMLを記述していました。

<div id="page">
	<div class="header"><h1>ヘッダーだよ( *｀ω´)</h1></div>
	<div class="content">
		<p>ページ本体だよ( *｀ω´)</p>
	</div>
	<div class="footer"><h1>フッターだよ( *｀ω´)</h1></div>
</div>

昔のHTMLだよ( *｀ω´)を開く（このサンプルはChromeブラウザでの閲覧をおすすめします。）

「divってなんだよ」な「かなり前の時代」はtableで全部ごりごり書いていた記憶がうっすらあるのですが、少し前の時代のHTMLではヘッダーやフッター含めdivで区分け（division）を設定して、それにCSSを当てていました。上記のサンプル表示の場合はスタイルが特にないので、この記事のh1やpタグに対するスタイルがあたっています。

■HTML5のHTMLのページ構成

HTML5の時代になると、専用の区分けタグが登場し以下のような記述の仕方に代わりました。

<div id="page">
	<header><h1>ヘッダーだよ( *｀ω´)</h1></header>
	<div class="content">
		<p>ページ本体だよ( *｀ω´)</p>
	</div>
	<footer><h1>フッターだよ( *｀ω´)</h1></footer>
</div>

HTML5だよ( *｀ω´)を開く（このサンプルはChromeブラウザでの閲覧をおすすめします。）

上記のサンプル表示の場合はたとえHTML5形式で記述されても、スタイルは特に指定していないので、この前のサンプル同様この記事のh1やpタグに対するスタイルがあたっています。

■jQuery Mobileのdata属性

さらにjQuery Mobileを用いるようになると、独自にdata-role属性を用いてHTMLを記述する事が出来るようになります。

data-role属性

有効な属性を割り当てる事により、区分けに様々な役割を割り当てる事が可能になります。

page：ページ
header：ヘッダー
content：コンテンツ本体
footer：フッター

<div id="page" data-role="page">
	<header data-role="header"><h1>ヘッダーだよ( *｀ω´)</h1></header>
	<div class="content" data-role="content">
		<p>ページ本体だよ( *｀ω´)</p>
	</div>
	<footer data-role="footer"><h1>フッターだよ( *｀ω´)</h1></footer>
</div>

jQuery Mobileだよ( *｀ω´)を開く（このサンプルはChromeブラウザでの閲覧をおすすめします。）

前の2つのサンプルと異なる見た目ですね。jQuery Mobileではデフォルトのテーマがあたっており、ヘッダーはヘッダーらしく、フッターはフッターらしい装飾が施されています。h1タグで囲まれている領域のテキストも、文字が単純に大きくなるわけではなく、特にモバイルデバイスで見たときに見やすい感じのフォントサイズになっています。

つづく

jQuery Mobile コンポーネントシリーズ #1 「ページ機構」

参考

jQuery Mobile - O'Reilly（洋書）

jQuery Mobile - O'Reilly（邦書）

上記jQuery Mobileの邦書版の監訳者白石さんの監訳者まえがきより

jQuery Mobileは、モバイルWebアプリの開発を劇的に容易にします。ブラウザ間の微妙な差異や、モバイルならではの考慮すべき事項を、ほとんど開発者の目から隠蔽します。基本的にマークアップのみでUIを構築できるように設計されているため、JavaScriptが苦手なデザイナーであっても、モックアップを容易に作成することができます。

おしまい

@Cronoloves